<template>
  <view class="container">
    <!-- 转盘显示区域 -->
    <view class="wheel-container">
      <view class="question-mark">{{ currentWheel.title }}</view>

      <!-- 转盘 - 使用边框透明创建三角形方法 -->
      <view style="position: relative">
        <view
          class="wheel-wrapper"
          :style="{ transform: `rotate(${rotation}deg)` }"
        >
          <view
            v-for="(option, index) in currentWheel.options"
            :key="index"
            class="wheel-section"
            :style="getSectionStyle(index, option)"
          >
            <text class="section-text" :style="getSectionTextStyle(index)">{{
              option.text
            }}</text>
          </view>
        </view>

        <!-- 中心按钮 -->
        <view
          class="center-btn"
          @click="spinWheel"
          :class="{ disabled: isSpinning }"
        >
          <!-- 指针 -->
          <view class="pointer"></view>
          <text class="btn-text">GO</text>
        </view>
      </view>
      <!-- 底部操作按钮 -->
      <view class="action-buttons">
        <uni-icons
          type="gear-filled"
          size="28"
          color="#666"
          @click="openSettings"
          class="btn-icon"
        ></uni-icons>
        <uni-icons
          type="compose"
          size="28"
          color="#666"
          @click="navigateToEdit"
          class="btn-icon"
        ></uni-icons>
        <uni-icons
          type="list"
          size="28"
          color="#666"
          @click="openHistory"
          class="btn-icon"
        ></uni-icons>
      </view>
    </view>

    <!-- 打开转盘列表按钮 -->
    <view class="wheel-list-buttons">
      <button class="list-btn" @click="openWheelList('hot')">热门转盘</button>
      <button class="list-btn" @click="openWheelList('my')">我的转盘</button>
    </view>

    <!-- 转盘列表弹窗 -->
    <uni-popup
      :safe-area="false"
      ref="wheelListPopup"
      type="bottom"
      :animation="true"
    >
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">{{
            activeWheelListType === "hot" ? "热门转盘" : "我的转盘"
          }}</text>
          <uni-icons
            type="close"
            size="24"
            color="#666"
            @click="closeWheelList"
          ></uni-icons>
        </view>

        <view class="popup-body wheel-popup-body">
          <!-- 热门转盘列表 -->
          <view v-if="activeWheelListType === 'hot'">
            <view v-for="wheel in hotWheels" :key="wheel.id" class="wheel-item">
              <view
                class="wheel-item-content"
                @click="() => selectWheelItem(wheel)"
              >
                <text class="item-title">{{ wheel.title }}</text>
              </view>
              <uni-icons
                type="star"
                :size="20"
                :color="isFavorite(wheel.id) ? '#FFD700' : '#CCC'"
                @click.stop="toggleFavorite(wheel.id)"
              ></uni-icons>
            </view>
          </view>

          <!-- 我的转盘列表 -->
          <view v-if="activeWheelListType === 'my'">
            <view class="create-btn" @click="navigateToEdit">
              <text class="create-text">+ 创建转盘</text>
            </view>

            <view v-for="wheel in myWheels" :key="wheel.id" class="wheel-item">
              <view
                class="wheel-item-content"
                @click="() => selectWheelItem(wheel)"
              >
                <text class="item-title">{{ wheel.title }}</text>
              </view>
              <view class="item-actions">
                <uni-icons
                  type="edit"
                  size="20"
                  color="#666"
                  @click.stop="editMyWheel(wheel)"
                ></uni-icons>
                <uni-icons
                  type="trash"
                  size="20"
                  color="#666"
                  @click.stop="deleteMyWheel(wheel.id)"
                ></uni-icons>
              </view>
            </view>
            <!-- 缓存提示 -->
            <view class="cache-tip">最多缓存50条记录</view>
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 历史记录弹窗 -->
    <uni-popup
      :safe-area="false"
      ref="historyPopup"
      type="right"
      :animation="true"
    >
      <view class="popup-content history-popup-content">
        <view class="popup-header">
          <text class="popup-title">历史记录</text>
          <uni-icons
            type="close"
            size="24"
            color="#666"
            @click="closeHistory"
          ></uni-icons>
        </view>

        <view class="popup-body history-popup-body">
          <view v-if="historyList.length === 0" class="empty-history">
            <text>暂无历史记录</text>
          </view>
          <view
            v-for="(item, index) in historyList"
            :key="index"
            class="history-item"
          >
            <view class="history-time">{{ item.time }}</view>
            <view class="history-content">
              <view class="history-wheel-name">{{ item.wheelName }}</view>
              <view class="history-result">抽中: {{ item.result }}</view>
            </view>
          </view>
          <!-- 缓存提示 -->
          <view class="cache-tip">最多缓存100条记录</view>
        </view>
      </view>
    </uni-popup>

    <!-- 设置弹窗 -->
    <uni-popup
      :safe-area="false"
      ref="settingsPopup"
      type="bottom"
      :animation="true"
    >
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">设置</text>
          <uni-icons
            type="close"
            size="24"
            color="#666"
            @click="closeSettings"
          ></uni-icons>
        </view>

        <view class="popup-body">
          <view class="setting-item">
            <text>震动</text>
            <switch
              :checked="vibrationEnabled"
              @change="onVibrationChange"
              activeColor="#11AAAA"
              class="small-switch"
            ></switch>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import hotWheelsData from "./hot-wheels.json";

export default {
  name: "LuckyWheel",
  setup() {
    // 状态管理
    const activeTab = ref("hot");
    const activeWheelListType = ref("hot"); // 当前显示的转盘列表类型
    const isSpinning = ref(false);
    const rotation = ref(0);
    // const showSettings = ref(false); // 使用ref方式调用，不再需要此变量
    const soundEnabled = ref(true);
    const vibrationEnabled = ref(true);

    // 热门转盘数据
    const hotWheels = ref([]);

    // 我的转盘数据
    const myWheels = ref([]);

    // 历史记录数据
    const historyList = ref([]);

    // 当前选中的转盘
    const currentWheel = reactive({
      id: "default",
      title: "自定义转盘",
      options: [
        { text: "选项一", color: "#FF6B6B" },
        { text: "选项二", color: "#4ECDC4" },
        { text: "选项三", color: "#FFD166" },
        { text: "选项四", color: "#6A0572" },
        { text: "选项五", color: "#1A535C" },
      ],
    });

    // 收藏的转盘ID列表
    const favoriteIds = ref([]);

    // 获取默认颜色
    const getDefaultColor = (index) => {
      const colors = [
        "#FF6B6B",
        "#4ECDC4",
        "#FFD166",
        "#6A0572",
        "#1A535C",
        "#FF8C42",
        "#A8E6CF",
        "#DCEDC2",
      ];
      return colors[index % colors.length];
    };

    // 获取扇形区域样式 - 使用CSS变量和clip-path创建精确扇形
    const getSectionStyle = (index, option) => {
      const count = currentWheel.options.length;
      const angle = 360 / count;
      const startAngle = index * angle;
      const color = option.color || getDefaultColor(index);

      // 计算扇形的clip-path路径
      const radius = 70.71; // 相对于父元素的百分比
      const centerX = 50; // 中心点X坐标
      const centerY = 50; // 中心点Y坐标

      // 计算扇形的起始点和结束点坐标
      const startRad = (startAngle * Math.PI) / 180;
      const endRad = ((startAngle + angle) * Math.PI) / 180;

      const startX = centerX + radius * Math.cos(startRad);
      const startY = centerY + radius * Math.sin(startRad);
      const endX = centerX + radius * Math.cos(endRad);
      const endY = centerY + radius * Math.sin(endRad);

      // 创建clip-path多边形
      const clipPath = `polygon(${centerX}% ${centerY}%, ${startX}% ${startY}%, ${endX}% ${endY}%)`;

      return {
        position: "absolute",
        width: "100%",
        height: "100%",
        backgroundColor: color,
        clipPath: clipPath,
        transformOrigin: "center",
      };
    };

    // 计算文本样式
    const getSectionTextStyle = (index) => {
      const count = currentWheel.options.length;
      const angle = 360 / count;
      const startAngle = index * angle;
      const textAngle = startAngle + angle / 2;

      // 计算文本位置，确保在扇形中间，使用更大的radius值让文本离中心更远
      const radius = 200; // 文本距离中心的距离（rpx）
      const radians = (textAngle * Math.PI) / 180;
      const x = radius * Math.cos(radians);
      const y = radius * Math.sin(radians);

      return {
        position: "absolute",
        left: "50%",
        top: "50%",
        transform: `translate(-50%, -50%) translateX(${x}rpx) translateY(${y}rpx) rotate(${
          textAngle + 90
        }deg)`,
        fontSize: "32rpx",
        color: "#fff",
        fontWeight: "bold",
        textAlign: "center",
        whiteSpace: "nowrap",
        textShadow: "1rpx 1rpx 2rpx rgba(0,0,0,0.3)",
        writingMode: "vertical-rl",
        zIndex: 1,
        maxWidth: "150rpx",
      };
    };

    // 判断是否已收藏
    const isFavorite = (id) => {
      return favoriteIds.value.includes(id);
    };

    // 切换收藏状态
    const toggleFavorite = (id) => {
      const index = favoriteIds.value.indexOf(id);
      if (index > -1) {
        // 取消收藏
        favoriteIds.value.splice(index, 1);
        // 从我的转盘列表中移除
        const wheelIndex = myWheels.value.findIndex(w => w.id === id);
        if (wheelIndex > -1) {
          myWheels.value.splice(wheelIndex, 1);
        }
      } else {
        // 添加收藏
        favoriteIds.value.push(id);
        // 查找对应的热门转盘
        const hotWheel = hotWheels.value.find(w => w.id === id);
        if (hotWheel && !myWheels.value.find(w => w.id === id)) {
          // 将热门转盘添加到我的转盘列表
          myWheels.value.push(JSON.parse(JSON.stringify(hotWheel)));
        }
      }
      saveToStorage();
    };

    // 使用热门转盘
    const useHotWheel = (wheel) => {
      // 复制热门转盘数据
      currentWheel.id = wheel.id;
      currentWheel.title = wheel.title;
      currentWheel.options = JSON.parse(JSON.stringify(wheel.options));

      // 重置转盘
      rotation.value = 0;
      isSpinning.value = false;
    };

    // 选择我的转盘
    const selectMyWheel = (wheel) => {
      currentWheel.id = wheel.id;
      currentWheel.title = wheel.title;
      currentWheel.options = JSON.parse(JSON.stringify(wheel.options));
      rotation.value = 0;
      isSpinning.value = false;
    };

    // 编辑我的转盘
    const editMyWheel = (wheel) => {
      uni.navigateTo({
        url: `edit-wheel?id=${wheel.id}`,
      });
    };

    // 删除我的转盘
    const deleteMyWheel = (id) => {
      uni.showModal({
        title: "确认删除",
        content: "确定要删除这个转盘吗？",
        success: (res) => {
          if (res.confirm) {
            myWheels.value = myWheels.value.filter((w) => w.id !== id);
            const index = favoriteIds.value.indexOf(id);
            if (index > -1) {
              favoriteIds.value.splice(index, 1);
            }
            saveToStorage();

            // 如果删除的是当前转盘，恢复默认
            if (currentWheel.id === id) {
              Object.assign(currentWheel, {
                id: "default",
                title: "自定义转盘",
                options: [
                  { text: "选项一", color: "#FF6B6B" },
                  { text: "选项二", color: "#4ECDC4" },
                  { text: "选项三", color: "#FFD166" },
                  { text: "选项四", color: "#6A0572" },
                  { text: "选项五", color: "#1A535C" },
                ],
              });
              rotation.value = 0;
            }
          }
        },
      });
    };

    // 导航到编辑页面
    const navigateToEdit = () => {
      // 关闭转盘列表弹窗
      closeWheelList();

      // 检查当前显示的转盘是否为热门转盘
      const isHotWheel = hotWheels.value.some((w) => w.id === currentWheel.id);
      const isMyWheel = myWheels.value.some((w) => w.id === currentWheel.id);

      let url = "edit-wheel";

      if (currentWheel.id && currentWheel.id !== "default") {
        if (isHotWheel) {
          // 编辑热门转盘，传递isHot=true参数
          url = `edit-wheel?id=${currentWheel.id}&isHot=true`;
          console.log("编辑热门转盘，传递参数:", { id: currentWheel.id, isHot: true });
        } else if (isMyWheel) {
          // 编辑我的转盘，不传递isHot参数
          url = `edit-wheel?id=${currentWheel.id}`;
          console.log("编辑我的转盘，传递参数:", { id: currentWheel.id });
        }
      }

      uni.navigateTo({
        url: url,
      });
    };

    // 打开转盘列表弹窗
    const openWheelList = (type) => {
      activeWheelListType.value = type;
      if (instance && instance.refs && instance.refs.wheelListPopup) {
        instance.refs.wheelListPopup.open();
      }
    };

    // 关闭转盘列表弹窗
    const closeWheelList = () => {
      if (instance && instance.refs && instance.refs.wheelListPopup) {
        instance.refs.wheelListPopup.close();
      }
    };

    // 选择转盘列表项
    const selectWheelItem = (wheel) => {
      // 根据列表类型选择对应的处理方法
      if (activeWheelListType.value === "hot") {
        useHotWheel(wheel);
      } else {
        selectMyWheel(wheel);
      }
      // 关闭弹窗
      closeWheelList();
    };

    // 震动反馈优化 - 支持持续震动
    let vibrationInterval = null;

    const triggerVibration = (isContinuous = false) => {
      if (!vibrationEnabled.value) return;
      try {
        // 停止之前可能存在的震动间隔
        if (vibrationInterval) {
          clearInterval(vibrationInterval);
          vibrationInterval = null;
        }

        // 如果需要持续震动
        if (isContinuous) {
          // 先触发一次即时震动
          if (uni.vibrateShort) {
            uni.vibrateShort();
          }
          // 设置间隔震动，模拟持续效果
          vibrationInterval = setInterval(() => {
            if (vibrationEnabled.value && uni.vibrateShort) {
              uni.vibrateShort();
            } else if (vibrationInterval) {
              clearInterval(vibrationInterval);
              vibrationInterval = null;
            }
          }, 100); // 每200ms触发一次震动
        } else {
          // 单次震动
          if (uni.vibrateShort) {
            uni.vibrateShort();
          } else if (uni.vibrateLong) {
            uni.vibrateLong();
          }
        }
      } catch (e) {
        console.log("震动功能不可用:", e);
        // 确保清理定时器
        if (vibrationInterval) {
          clearInterval(vibrationInterval);
          vibrationInterval = null;
        }
      }
    };

    // 停止震动
    const stopVibration = () => {
      if (vibrationInterval) {
        clearInterval(vibrationInterval);
        vibrationInterval = null;
      }
    };

    // 处理震动设置变化
    const onVibrationChange = (event) => {
      const newValue = event.detail.value;
      vibrationEnabled.value = newValue;

      // 保存设置到本地存储
      saveToStorage();

      // 如果开启震动，提供一个轻微的反馈
      if (newValue) {
        triggerVibration();
      }
    };

    // 旋转转盘
    const spinWheel = () => {
      if (isSpinning.value) return;

      console.log("开始旋转转盘");
      isSpinning.value = true;

      // 震动反馈 - 开始旋转时使用持续震动
      triggerVibration(true); // 开启持续震动
      // 计算旋转角度 - 确保选中的选项精确停在正上方
      const sectionAngle = 360 / currentWheel.options.length;
      const randomIndex = Math.floor(
        Math.random() * currentWheel.options.length
      );

      // 重新计算目标角度：确保选中的选项中心点精确停在正上方
      // 计算逻辑：
      // 1. 计算当前旋转角度的余数
      const currentAngle = rotation.value % 360;
      // 2. 计算选中选项应该停在的目标角度（从0度开始的逆时针角度）
      const desiredAngle =
        (360 - (randomIndex * sectionAngle + sectionAngle / 2)) % 360;
      // 3. 计算需要额外旋转的角度，确保旋转方向一致且最短路程
      let additionalRotation = (desiredAngle - currentAngle + 360) % 360;
      // 4. 添加5-8圈的随机旋转，使旋转更自然
      const extraSpins = 5 + Math.floor(Math.random() * 4);
      // 5. 计算总旋转角度
      const totalRotation =
        rotation.value + 360 * extraSpins + additionalRotation - 90;

      // 动画效果
      const duration = 5000; // 5秒动画更自然
      const startRotation = rotation.value;

      // 简化动画逻辑，使用更可靠的实现方式
      let currentStep = 0;
      const totalSteps = 100; // 总共100步
      const stepDuration = duration / totalSteps; // 每步持续时间

      const animate = () => {
        currentStep++;
        if (currentStep > totalSteps) {
          // 结束动画
          rotation.value = totalRotation;
          console.log(
            "转盘旋转结束，结果：",
            currentWheel.options[randomIndex].text
          );
          isSpinning.value = false;

          // 停止持续震动，并触发一次结束震动
          stopVibration();
          triggerVibration(); // 结束时的单次震动

          // 记录历史记录
          addHistoryRecord(
            currentWheel.title,
            currentWheel.options[randomIndex].text
          );

          // 显示结果
          uni.showToast({
            title: `恭喜抽到: ${currentWheel.options[randomIndex].text}`,
            icon: "none",
            duration: 3000,
          });
          return;
        }

        // 计算进度
        let progress = currentStep / totalSteps;

        // 使用始终保持顺时针方向的缓动函数
        // 使用easeOutCubic缓动，确保动画从加速到减速的过程中始终保持顺时针方向
        const easeOutCubic = (t) => {
          return 1 - Math.pow(1 - t, 3);
        };

        // 使用easeOutQuad和easeInOutSine的组合，创造更自然的加速减速效果
        const easeOutQuad = (t) => {
          return t * (2 - t);
        };

        // 混合两种缓动函数，确保始终保持顺时针方向
        const t = progress;
        // 先快速加速，然后逐渐减速
        progress = easeOutQuad(t) * 0.7 + easeOutCubic(t) * 0.3;

        // 更新旋转角度 - 确保始终增加，不会减少
        rotation.value =
          startRotation + Math.abs(totalRotation - startRotation) * progress;

        // 继续动画
        setTimeout(animate, stepDuration);
      };

      // 开始动画
      setTimeout(animate, 0);
    };

    // 格式化日期时间
    const formatDateTime = (date) => {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");

      return `${year}-${month}-${day} ${hours}:${minutes}`;
    };

    // 添加历史记录
    const addHistoryRecord = (wheelName, result) => {
      const now = new Date();
      const timeStr = formatDateTime(now);

      const newRecord = {
        time: timeStr,
        wheelName: wheelName,
        result: result,
      };

      // 添加到历史记录开头
      historyList.value.unshift(newRecord);

      // 限制最多保存100条记录
      if (historyList.value.length > 100) {
        historyList.value = historyList.value.slice(0, 100);
      }

      // 保存到本地存储
      uni.setStorageSync("historyList", historyList.value);
    };

    // 保存数据到本地存储
    const saveToStorage = () => {
      // 限制最多保存50条转盘
      if (myWheels.value.length > 50) {
        myWheels.value = myWheels.value.slice(0, 50);
      }

      uni.setStorageSync("myWheels", myWheels.value);
      uni.setStorageSync("favoriteIds", favoriteIds.value);
      uni.setStorageSync("soundEnabled", soundEnabled.value);
      uni.setStorageSync("vibrationEnabled", vibrationEnabled.value);
    };

    // 从本地存储加载数据
    const loadFromStorage = () => {
      const savedMyWheels = uni.getStorageSync("myWheels");
      const savedFavorites = uni.getStorageSync("favoriteIds");
      const savedSound = uni.getStorageSync("soundEnabled");
      const savedVibration = uni.getStorageSync("vibrationEnabled") ?? true;
      const savedHistory = uni.getStorageSync("historyList");

      if (savedMyWheels) myWheels.value = savedMyWheels;
      if (savedFavorites) favoriteIds.value = savedFavorites;
      if (savedSound !== undefined) soundEnabled.value = savedSound;
      if (savedVibration !== undefined) vibrationEnabled.value = savedVibration;
      if (savedHistory) historyList.value = savedHistory;
    };

    // 刷新数据方法 - 供编辑页面调用
    const refreshData = (newWheelId = null) => {
      // 重新加载本地存储的数据
      loadFromStorage();

      // 如果有新保存的转盘id，直接切换到该转盘
      if (newWheelId) {
        const newWheel = myWheels.value.find((w) => w.id === newWheelId);
        if (newWheel) {
          currentWheel.id = newWheel.id;
          currentWheel.title = newWheel.title;
          currentWheel.options = JSON.parse(JSON.stringify(newWheel.options));
          console.log("切换到新保存的转盘:", newWheel.title);
          return;
        }
      }

      // 检查当前显示的转盘是否需要更新
      if (currentWheel.id && currentWheel.id !== "default") {
        const updatedWheel = myWheels.value.find(
          (w) => w.id === currentWheel.id
        );
        if (updatedWheel) {
          // 更新当前转盘数据
          currentWheel.title = updatedWheel.title;
          currentWheel.options = JSON.parse(
            JSON.stringify(updatedWheel.options)
          );
        }
      }

      console.log("数据已刷新");
    };

    // 初始化
    onMounted(() => {
      // 加载热门转盘数据（直接从本地JSON文件加载）
      try {
        hotWheels.value = hotWheelsData;
        console.log('成功加载本地热门转盘数据，共', hotWheels.value.length, '个');
      } catch (error) {
        console.error('加载本地热门转盘数据失败:', error);
        hotWheels.value = [];
      }

      // 加载本地数据（我的转盘）
      loadFromStorage();
    });

    // 获取当前组件实例
    const instance = getCurrentInstance();

    // 打开设置弹窗
    const openSettings = () => {
      if (instance && instance.refs && instance.refs.settingsPopup) {
        instance.refs.settingsPopup.open();
      }
    };

    // 打开历史记录弹窗
    const openHistory = () => {
      if (instance && instance.refs && instance.refs.historyPopup) {
        instance.refs.historyPopup.open();
      }
    };

    // 关闭历史记录弹窗
    const closeHistory = () => {
      if (instance && instance.refs && instance.refs.historyPopup) {
        instance.refs.historyPopup.close();
      }
    };

    // 关闭设置弹窗
    const closeSettings = () => {
      if (instance && instance.refs && instance.refs.settingsPopup) {
        instance.refs.settingsPopup.close();
      }
    };

    return {
      activeTab,
      activeWheelListType,
      isSpinning,
      rotation,
      soundEnabled,
      vibrationEnabled,
      onVibrationChange,
      openSettings,
      closeSettings,
      openWheelList,
      closeWheelList,
      selectWheelItem,
      hotWheels,
      refreshData,
      myWheels,
      historyList,
      currentWheel,
      isFavorite,
      toggleFavorite,
      useHotWheel,
      selectMyWheel,
      editMyWheel,
      deleteMyWheel,
      navigateToEdit,
      spinWheel,
      triggerVibration,
      stopVibration,
      openHistory,
      closeHistory,
      getDefaultColor,
      getSectionStyle,
      getSectionTextStyle,
      refreshData,
    };
  },
};
</script>
<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  padding-top: 60rpx;
  padding-bottom: 60rpx;
  min-height: 100vh;
  background: linear-gradient(180deg, #11aaaa 0%, #f6f6f6 50%);
}

/* 转盘列表按钮样式 */
.wheel-list-buttons {
  display: flex;
  justify-content: center;
  gap: 30rpx;
  margin: 30rpx 0;
  padding: 0 30rpx;
}

.list-btn {
  flex: 1;
  padding: 20rpx 0;
  background-color: #fff;
  border: none;
  border-radius: 50rpx;
  font-size: 28rpx;
  color: #11aaaa;
  font-weight: bold;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.list-btn:active {
  opacity: 0.8;
  transform: scale(0.98);
}

/* 弹窗列表样式 */
.wheel-popup-body {
  max-height: 60vh;
  overflow-y: auto;
  padding: 0 20rpx 20rpx;
}

/* 确保弹窗内容有足够的空间 */
.popup-content {
  padding-bottom: 20rpx;
}

/* 弹窗中的wheel-item样式优化 */
.wheel-popup-body .wheel-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 20rpx;
  margin-bottom: 0;
  background-color: #fff;
  border-bottom: 1rpx solid #f0f0f0;
}

.wheel-popup-body .wheel-item:last-child {
  border-bottom: none;
}

/* 创建按钮在弹窗中的样式 */
.wheel-popup-body .create-btn {
  text-align: center;
  padding: 30rpx;
  margin-bottom: 10rpx;
  background-color: #f8f8f8;
  border-radius: 10rpx;
}

.wheel-popup-body .create-text {
  color: #11aaaa;
  font-size: 30rpx;
  font-weight: bold;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 0;
  position: relative;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
}

.settings-icon {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
}

.wheel-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 40rpx 0;
  position: relative;
}

.question-mark {
  font-size: 32rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 30rpx;
}

.wheel-wrapper {
  flex-shrink: 0;
  width: 600rpx;
  height: 600rpx;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  border: 8rpx solid #fff;
  box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.2);
  /* 确保transform属性能够正常工作 */
  transform-origin: center center;
}

.wheel-section {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: center;
  overflow: hidden;
}

.section-text {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #fff;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.3);
  z-index: 1;
}

/* 指针样式 - 确保指向正上方 */
.pointer {
  position: absolute;
  top: -30rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 30rpx solid transparent;
  border-right: 30rpx solid transparent;
  border-bottom: 40rpx solid #ffffff;
  z-index: 10;
}

/* 中心按钮 */
.center-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  z-index: 5;
  cursor: pointer;
}

.center-btn:active {
  transform: translate(-50%, -50%) scale(0.95);
}

.center-btn.disabled {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed;
}

.btn-text {
  font-size: 36rpx;
  font-weight: bold;
  color: #11aaaa;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  width: 600rpx;
  margin-top: 40rpx;
}

.btn-icon {
  padding: 20rpx;
}

.tabs {
  display: flex;
  background: #fff;
  border-radius: 10rpx 10rpx 0 0;
  margin: 0 30rpx;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 30rpx;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tab.active {
  color: #11aaaa;
  font-weight: bold;
}

.tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 4rpx;
  background: #11aaaa;
}

.wheel-list {
  background: #fff;
  margin: 0 30rpx 30rpx;
  border-radius: 0 0 10rpx 10rpx;
  padding: 20rpx;
  min-height: 300rpx;
}

.create-btn {
  text-align: center;
  padding: 30rpx;
  border: 2rpx dashed #ddd;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.create-text {
  font-size: 28rpx;
  color: #11aaaa;
}
.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;
}

/* 自定义小尺寸switch样式 */
.small-switch {
  transform: scale(0.8); /* 缩小到原来的80% */
  transform-origin: right center;
}

.wheel-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.wheel-item:last-child {
  border-bottom: none;
}

.wheel-item-content {
  display: flex;
  align-items: center;
  flex: 1;
}

.item-icon {
  margin-right: 20rpx;
}

.item-title {
  font-size: 28rpx;
  color: #333;
}

.item-actions {
  display: flex;
  gap: 30rpx;
}

.popup-content {
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
  padding: 0 20rpx 40rpx;
  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.popup-body {
  padding: 30rpx 0;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
}

.setting-item text {
  font-size: 28rpx;
  color: #333;
}
</style>

<style lang="scss" scoped>
/* 缓存提示样式 */
.cache-tip {
  text-align: center;
  font-size: 24rpx;
  color: #999;
  margin-top: 20rpx;
  padding-bottom: 20rpx;
}

/* 历史记录弹窗样式 */
.history-popup-content {
  width: 85vw;
  height: 100vh;
  background-color: #fff;
  border-radius: 16rpx;
}

.history-popup-body {
  height: calc(100% - 80rpx);
  overflow-y: auto;
  padding: 20rpx;
  /* 滚动优化 */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}

.history-item {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.history-time {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.history-content {
  font-size: 28rpx;
}

.history-wheel-name {
  color: #333;
  margin-bottom: 8rpx;
  font-weight: bold;
}

.history-result {
  color: #11aaaa;
}

.empty-history {
  text-align: center;
  color: #999;
  padding: 100rpx 0;
}

/* 确保转盘列表弹窗样式正确 */
.wheel-popup-body {
  max-height: 70vh;
  overflow-y: auto;
}
</style>
